<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/game.css">
    <link rel="shortcut icon" type="image/x-icon" href="../image/logo_1.ico">
    <script type="text/javascript" src="../js/game-deck.js"></script>
    <script type="text/javascript" src="../js/game-hand.js"></script>
    <script type="text/javascript" src="../js/game-tomb.js"></script>
    <script type="text/javascript" src="../js/game.js"></script>
    <title>万世牌（游戏中）</title>
  </head>
  <body>
    <style>
      body {
        width: 1820px;
        background-image: url(../image/bg1.png);
      }
    </style>
    <div class="header clearf"></div>
    <!-- 主控制面板 -->
    <div class="control-field colm-controlfield height-total clearf">
      <div class="card-field">
        <img id="card-info" class="card" src="">
      </div>
      <div class="option-button">
        <button class="button" type="button" name="attkSummon" onclick="placeCard('attk', 'monster')">角色召唤</button>
        <button class="button" type="button" name="launchCard" onclick="placeCard('on', 'magic')">发动手牌</button>
        <button class="button" type="button" name="backtoHand" onclick="backtoHand()">回到手牌</button>
        <button class="button" type="button" name="backtoDeck" onclick="backtoDeck()">回到卡组</button>
        <button class="button" type="button" name="sendtoTomb" onclick="sendtoTomb()">进入弃牌堆</button>
        <button class="button" type="button" name="sendtoGameout" onclick="sendtoGameout()">除去游戏外</button>
        <button class="button" type="button" name="selectGameout" onclick="selectGameout()">从游戏外选择</button>
        <button class="button" type="button" name="selectGameout" onclick="backtomain()">退出游戏</button>
      </div>
    </div>

    <!-- 游戏主要场地 -->
    <div class="main-field  colm-mainfield height-total clearf">
      <div class="hand-field colm-10 height-2">
        <div class="card-field">  <!-- 对方手卡置卡区(上限8张) -->
          <div class="item">
            <img id="p2-hand7" class="card" onmouseover="showCardInfo('hand', this.src, 7, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand6" class="card" onmouseover="showCardInfo('hand', this.src, 6, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand5" class="card" onmouseover="showCardInfo('hand', this.src, 5, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand4" class="card" onmouseover="showCardInfo('hand', this.src, 4, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand3" class="card" onmouseover="showCardInfo('hand', this.src, 3, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand2" class="card" onmouseover="showCardInfo('hand', this.src, 2, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand1" class="card" onmouseover="showCardInfo('hand', this.src, 1, 'player2')" src="">
          </div>
          <div class="item">
            <img id="p2-hand0" class="card" onmouseover="showCardInfo('hand', this.src, 0, 'player2')" src="">
          </div>
        </div>
      </div>
      <div class="battle-field colm-10 height-6">
        <div class="card-field">  <!-- 对方战场卡牌区域 -->
          <div id="p2field8" class="item">  <!-- 角色区(上限5张) -->
            <img id="p2-field8" class="card" onmouseover="showCardInfo('field', this.src, 8, 'player2')" onclick="selectCard('p2field8', 'field', this.src, 8, 'player2')" src="">
          </div>
          <div id="p2field6" class="item">
            <img id="p2-field6" class="card" onmouseover="showCardInfo('field', this.src, 6, 'player2')" onclick="selectCard('p2field6', 'field', this.src, 6, 'player2')" src="">
          </div>
          <div id="p2field5" class="item">
            <img id="p2-field5" class="card" onmouseover="showCardInfo('field', this.src, 5, 'player2')" onclick="selectCard('p2field5', 'field', this.src, 5, 'player2')" src="">
          </div>
          <div id="p2field7" class="item">
            <img id="p2-field7" class="card" onmouseover="showCardInfo('field', this.src, 7, 'player2')" onclick="selectCard('p2field7', 'field', this.src, 7, 'player2')" src="">
          </div>
          <div id="p2field9" class="item">
            <img id="p2-field9" class="card" onmouseover="showCardInfo('field', this.src, 9, 'player2')" onclick="selectCard('p2field9', 'field', this.src, 9, 'player2')" src="">
          </div>
        </div>
        <div class="card-field">  <!-- 我方战场卡牌区域 -->
          <div id="p1field3" class="item">  <!-- 怪兽区(上限5张) -->
            <img id="p1-field3" class="card" onmouseover="showCardInfo('field', this.src, 3, 'player1')" onclick="selectCard('p1field3', 'field', this.src, 3, 'player1')" src="">
          </div>
          <div id="p1field1" class="item">
            <img id="p1-field1" class="card" onmouseover="showCardInfo('field', this.src, 1, 'player1')" onclick="selectCard('p1field1', 'field', this.src, 1, 'player1')" src="">
          </div>
          <div id="p1field0" class="item">
            <img id="p1-field0" class="card" onmouseover="showCardInfo('field', this.src, 0, 'player1')" onclick="selectCard('p1field0', 'field', this.src, 0, 'player1')" src="">
          </div>
          <div id="p1field2" class="item">
            <img id="p1-field2" class="card" onmouseover="showCardInfo('field', this.src, 2, 'player1')" onclick="selectCard('p1field2', 'field', this.src, 2, 'player1')" src="">
          </div>
          <div id="p1field4" class="item">
            <img id="p1-field4" class="card" onmouseover="showCardInfo('field', this.src, 4, 'player1')" onclick="selectCard('p1field4', 'field', this.src, 4, 'player1')" src="">
          </div>
        </div>

      </div>
      <div class="hand-field colm-10 height-2">
        <div class="card-field">  <!-- 我方手卡置卡区(上限8张) -->
          <div class="item">
            <img id="p1-hand0" class="card" onmouseover="showCardInfo('hand', this.src, 0, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 0, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand1" class="card" onmouseover="showCardInfo('hand', this.src, 1, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 1, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand2" class="card" onmouseover="showCardInfo('hand', this.src, 2, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 2, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand3" class="card" onmouseover="showCardInfo('hand', this.src, 3, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 3, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand4" class="card" onmouseover="showCardInfo('hand', this.src, 4, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 4, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand5" class="card" onmouseover="showCardInfo('hand', this.src, 5, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 5, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand6" class="card" onmouseover="showCardInfo('hand', this.src, 6, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 6, 'player1')" src="">
          </div>
          <div class="item">
            <img id="p1-hand7" class="card" onmouseover="showCardInfo('hand', this.src, 7, 'player1')" onclick="selectCard(this.id, 'hand', this.src, 7, 'player1')" src="">
          </div>
        </div>
      </div>
    </div>

    <!-- 卡组，环境卡槽区 -->
    <div class="rside-field colm-deckfield height-total clearf">
      <div class="item env">
        <img id="p1-env" class="card" onmouseover="" src="">
      </div>
      <div class="item deck">
        <img id="deck_r" class="card" src="../image/cardback.png" alt="cardback" onclick="drawCard()">
      </div>
    </div>

    <!-- 副控制面板 -->
    <div class="card-selection">
      <div id="select-area" class="selection-area"></div>
      <div class="button-area">
        <button class="button" type="button" onclick="sf_buttons('deck')">从牌组中选择</button>
        <button class="button" type="button" onclick="sf_buttons('p1tomb')">从我方弃牌堆选择</button>
        <button class="button" type="button" onclick="sf_buttons('p2tomb')">从对方弃牌堆选择</button>
        <button class="button" type="button" onclick="shuffleDeck()">洗牌</button>
      </div>
    </div>

  </body>
</html>